<template>
    <div>
      <van-nav-bar :title="kk" @click-left="onClickLeft" left-arrow />
      <comment :item="item"></comment>
      <p style="font-size: 0.37333rem">全部回复</p>
      <!-- 回复list -->
      <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="getReply"
        v-model="loading"
        :immediate-check="false"
      >
        <comment
          :arr="plList"
          v-for="(obj, index) in plList"
          :key="index"
          :item="obj"
        ></comment>
      </van-list>
      <van-button
        style="width: 100%; position: fixed; bottom: 0; left: 0"
        @click="isShowPl = true"
        >评论</van-button
      >
      <!-- 评论弹层 -->
      <van-popup v-model="isShowPl" position="bottom" :style="{ height: '20%' }">
        <van-field
          v-model="message"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
        <van-button
          :disabled="message.length === 0 ? true : false"
          type="info"
          @click="wzFabu"
          >发布</van-button
        >
      </van-popup>
    </div>
  </template>
  
  <script>
  import { getCommentAPI, commentsArticle } from '@/api'
  import dayjs from '@/utils/dayjs'
  import comment from './comment.vue'
  export default {
    components: { comment },
    props: ['item', 'artId'],
    computed: {
      times() {
        return (item) => {
          return dayjs(item.pubdate).fromNow()
        }
      },
      kk() {
        return this.count === 0 ? '暂无回复' : this.count + '条回复'
      }
    },
    data() {
      return {
        lastId: null,
        loading: false,
        finished: false,
        plList: [],
        isShowPl: false,
        message: '',
        count: 0
      }
    },
    created() {
      this.getReply()
    },
    methods: {
      dz() {},
      async getReply() {
        const { data } = await getCommentAPI({
          type: 'c',
          source: this.item.com_id,
          offset: this.lastId
        })
        this.plList.push(...data.data.results)
        this.count = data.data.total_count
        this.lastId = data.data.last_id
        if (data.data.total_count === this.plList.length) {
          this.finished = true
          this.loading = true
        } else {
          this.loading = false
        }
        console.log(data)
      },
      onClickLeft() {
        this.$emit('close')
      },
      async wzFabu() {
        const { data } = await commentsArticle({
          target: this.item.com_id,
          content: this.message,
          art_id: this.artId
        })
        console.log(data)
        this.isShowPl = false
        this.plList.unshift(data.data.new_obj)
        this.count++
      }
    }
  }
  </script>
  
  <style scoped lang="less">
  :deep(.van-nav-bar__content .van-nav-bar__title) {
    color: #323233;
  }
  </style>